import { roleList } from '@/services/ant-design-pro/roles';
import { departList, userList, userAdd, userDel, userEdit } from '@/services/ant-design-pro/user';
import { PlusOutlined } from '@ant-design/icons';
import ProForm, { ModalForm, ProFormRadio, ProFormSelect, ProFormText, ProFormTreeSelect } from '@ant-design/pro-form';
import { GridContent, PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Col, Row, Card, Tree, Button, Space, Modal, Image, Badge, message } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { Access } from 'umi';
import './index.less'

const User1: React.FC = () => {

    //默认树结构
    let [tree, settree]: any = useState([
        {
            id: 1, name: "振涛教育", children: [
                { id: 2, name: "市场部" },
                { id: 3, name: "人力资源部" },
            ]
        },
    ]);
    //部门一级模态框显示功能
    let [depart_id, setdepart] = useState("");
    let [showModal, setShowModal] = useState(false);

    //高级表单刷新使用
    let ref: any = useRef();
    let editformRef: any = useRef();//表单的数据内容
    let [editModal, setEditModal] = useState(false);
    let [editData, setData]: any = useState({});
    let [pwd, setpwd]: any = useState(false);

    //获取左侧的部门数据内容
    const getDepart = async () => {
        let { data }: any = await departList();

        console.log(data);

        settree(data);
    }
    useEffect(() => {
        getDepart();
    }, []);

    //删除用户的方法
    const del = async (id: any) => {
        let res = await userDel({ id });

        console.log(res);
        ref.current.reload();
    }

    //编辑第一步
    const edit = (record: any) => {
        // console.log(editformRef.current)
        setEditModal(true);

        setData({ ...record });
    }
    useEffect(() => {
        //回填数据的内容
        if (editModal) {
            editformRef.current.setFieldsValue({
                ...editData,
                depart_id: editData?.depart__id,
                role_id: editData?.roles__id,
                mg_status: editData.mg_status ? 1 : 0,
            })
        }

    }, [editModal]);


    //右侧商品分类数据的获取
    const columns: any = [
        {
            title: "用户ID",
            dataIndex: "id",
            key: "id",
            search: false,
            hideInForm: true,
        }, {
            title: "头像",
            search: false,
            render: (row: any, record: any) => (
                <Image width={120} src={record.profile_picture} />
            )
        }, {
            title: "用户名",
            dataIndex: "username",
        }, {
            title: "部门",
            dataIndex: "depart__name",
            search: false,
        }, {
            title: "角色名",
            dataIndex: "roles__role_name",
            search: false,
        }, {
            title: "角色标识码",
            dataIndex: "roles__role_code",
            search: false,
        }, {
            title: "邮箱",
            dataIndex: "email",
            hideInForm: true,
        }, {
            title: "状态",
            dataIndex: "mg_status",
            valueEnum: {
                0: {
                    text: "关闭",
                    status: "Error",
                },
                1: {
                    text: "启用",
                    status: "Processing"
                }
            },
            render: (row: any, record: any) => [
                <Badge status={record.mg_status ? "processing" : "error"} text={record.mg_status ? "启用" : "关闭"}>
                </Badge>
            ]

        }, {
            title: "操作",
            width: "80px",
            dataIndex: 'option',
            valueType: 'option',
            render: (row: any, record: any) => [
                <Button type='link' onClick={() => edit(record)}>修改</Button>,
                <Access accessible={record.username !== 'admin'}><Button type='link' danger onClick={() => Modal.confirm({
                    title: "删除提示",
                    content: "确定要删除该用户吗?",
                    onOk: () => del(record.id)
                })}>删除</Button></Access>
                ,
                <Button type='link' onClick={() => {
                    setpwd(true);
                    edit(record);
                }}>设置</Button>,
            ]

        }
    ]
    return (
        <PageContainer >
            <GridContent>
                <Row gutter={8}>
                    <Col span={4}>
                        <Card style={{ minHeight: "300px" }}>
                            <Tree
                                defaultExpandAll
                                onSelect={async (selectKey) => {
                                    console.log(selectKey[0])
                                    setdepart(selectKey[0] as string)
                                }}
                                treeData={tree}
                                showIcon showLine
                                fieldNames={{ key: 'id', title: "name" }}
                            />
                        </Card>
                    </Col>
                    <Col span={20}>
                        <Card>
                            <ProTable
                                rowKey="id"
                                rowSelection={{
                                    type: "checkbox",
                                }}
                                tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => [
                                    <Space size={12}>
                                        <span>已选择{selectedRowKeys.length} 项</span>
                                    </Space>
                                ]}

                                tableAlertOptionRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => [
                                    <Space size={12}>
                                        <Button danger>删除所选</Button>
                                        <a onClick={onCleanSelected}>取消选中</a>
                                    </Space>
                                ]}
                                columns={columns}
                                request={(params, sort, filter) => {
                                    console.log(params, sort, filter);
                                    return userList({ ...params })
                                }}
                                actionRef={ref}
                                toolbar={
                                    {
                                        actions: [
                                            <Button type="primary" onClick={() => setShowModal(true)}><PlusOutlined />新建</Button>
                                        ]
                                    }
                                }
                                params={{ depart_id }}
                                pagination={{
                                    defaultPageSize: 5,
                                    pageSizeOptions: [5, 10, 15, 20, 25],
                                    showSizeChanger: true,
                                    showQuickJumper: true,
                                }}
                            >
                            </ProTable>
                            {/* 新建用户的数据 */}
                            <ModalForm
                                visible={showModal}
                                title="添加用户"
                                onVisibleChange={setShowModal}
                                onFinish={async (values) => {
                                    console.log(values);
                                    await userAdd({ ...values });
                                    setShowModal(false);
                                    ref.current.reload();
                                }}
                            >
                                <ProForm.Group>
                                    <ProFormText name="username" required rules={[{ required: true, message: "输入用户名" }]} placeholder="输入用户名" width="md" label="用户名" />
                                    <ProFormTreeSelect
                                        name="depart_id"
                                        request={() => {
                                            return tree;
                                        }}
                                        required
                                        rules={[{ required: true, message: "部门信息不能为空" }]}
                                        placeholder="选择部门"
                                        width="md"
                                        label="用户部门"
                                        fieldProps={{
                                            fieldNames: {
                                                value: 'id',
                                                label: 'name',
                                            }
                                        }}

                                    />
                                </ProForm.Group>
                                <ProForm.Group>
                                    <ProFormText width="md" placeholder="输入用户邮箱" label="邮箱" name="email"
                                        required
                                        rules={[{ required: true, message: "邮箱信息不能为空" }]} />
                                    <ProFormText.Password width="md" label="密码" placeholder="输入用户密码" name="password"
                                        required
                                        rules={[{ required: true, message: "密码不能为空" }]} />
                                </ProForm.Group>
                                <ProForm.Group>
                                    <ProFormSelect
                                        name="role_id"
                                        rules={[{ required: true, message: "角色信息不能为空" }]}
                                        request={async () => {
                                            let { data } = await roleList()
                                            return data;
                                        }}
                                        fieldProps={{
                                            fieldNames: {
                                                value: "id",
                                                label: "role_name"
                                            }
                                        }}
                                        placeholder="选择角色"
                                        width="md"
                                        label="用户角色" />
                                    <ProFormRadio.Group required
                                        width="md"
                                        rules={[{ required: true, message: "选择状态" }]} name="mg_status" label="状态" options={[{ label: '关闭', value: 0 }, { label: '开启', value: 1 }]} />
                                </ProForm.Group>
                            </ModalForm>

                            {/* 编辑用户的信息 */}
                            <ModalForm
                                visible={editModal}
                                title="编辑用户"
                                onVisibleChange={setEditModal}
                                formRef={editformRef}
                                onFinish={async (values) => {
                                    let res = await userEdit({ ...values });
                                    // await userAdd({ ...values });
                                    message.success(res.msg);
                                    setEditModal(false);
                                    ref.current.reload();
                                }}
                            >
                                {
                                    pwd ?
                                        (
                                            <>
                                                <ProForm.Group>
                                                    <ProFormText name="id" hidden />
                                                    <ProFormText.Password width="lg" label={`输入用户 ${editData.username} 的新密码`} placeholder="输入用户密码" name="password"
                                                        required
                                                        rules={[{ required: true, message: "密码不能为空" }]} />
                                                </ProForm.Group>
                                            </>
                                        )
                                        :
                                        (
                                            <>
                                                <ProForm.Group>
                                                    <ProFormText name="id" hidden />
                                                    <ProFormText name="username" required rules={[{ required: true, message: "输入用户名" }]} placeholder="输入用户名" width="md" label="用户名" />
                                                    <ProFormTreeSelect
                                                        name="depart_id"
                                                        request={() => {
                                                            return tree;
                                                        }}
                                                        required
                                                        rules={[{ required: true, message: "部门信息不能为空" }]}
                                                        placeholder="选择部门"
                                                        width="md"
                                                        label="用户部门"
                                                        fieldProps={{
                                                            fieldNames: {
                                                                value: 'id',
                                                                label: 'name',
                                                            }
                                                        }}

                                                    />
                                                </ProForm.Group>
                                                <ProForm.Group>
                                                    <ProFormText width="md" placeholder="输入用户邮箱" label="邮箱" name="email"
                                                        required
                                                        rules={[{ required: true, message: "部门信息不能为空" }]} />
                                                    <ProFormRadio.Group required
                                                        rules={[{ required: true, message: "选择状态" }]} name="mg_status" label="状态" options={[{ label: '关闭', value: 0 }, { label: '开启', value: 1 }]} />
                                                </ProForm.Group>
                                                <ProForm.Group>
                                                    <ProFormSelect
                                                        name="role_id"
                                                        rules={[{ required: true, message: "角色信息不能为空" }]}
                                                        request={async () => {
                                                            let { data } = await roleList()
                                                            return data;
                                                        }}
                                                        fieldProps={{
                                                            fieldNames: {
                                                                value: "id",
                                                                label: "role_name"
                                                            }
                                                        }}
                                                        placeholder="选择角色"
                                                        width="md"
                                                        label="用户角色" />
                                                </ProForm.Group>
                                            </>
                                        )
                                }
                            </ModalForm>
                        </Card>
                    </Col>
                </Row>
            </GridContent>
        </PageContainer>
    )
}


export default User1;